<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>"i辛辣微博”选项设置</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
    <script type="text/javascript" src="jquery-1.7.min.js"></script>
    <script type="text/javascript" src="json2.js"></script>
    <script type="text/javascript" src="jquery.tagsinput.min.js"></script>
    </head>
<body class="options">
    <div id="optionsView" class="vignette">
        <div class="vignetteContent">
            <div id="optionsHeader">
                <img src="logo.png" />
            </div>
            <form name="optionsForm" class="optionsForm" action="#">
            <div id="optionsContainer">
                <h2>
                    “i辛辣微博”</h2>
                <table class="simpleOptions">
                   <tr>
                        <td>
                            启动隐藏微博主页右边项功能<br />
                            </td>
                        <td>
                            <input id="hide" type="checkbox" />（选中该项后，去微博主页右边点“<font style="color:Red;">隐藏</font>”两字）
                              </td>
                    </tr>
                    <tr>
                        <td>
                            默认显示大图片：
                        </td>
                        <td>
                            <input id="bigPic" type="checkbox"  />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            将网页分享到“新浪微博”：
                        </td>
                        <td>
                            <input id="sendToSina" type="checkbox"  />（修改该项，Chrome重启后起作用）
                        </td>
                    </tr>
                    <tr>
                        <td>
                            关闭发微薄的文本框下方那个新浪活动的广告</td>
                        <td>
                            <input id="ad" type="checkbox"  /></td>
                    </tr>
                    <tr>
                        <td>
                            隐藏包含特隐藏包含特定词（Tag）的微博</td>
                        <td>
                            <input id="mute" type="checkbox"  /><br />
                            现有Tag：<input id="txtTags" type="text" />
                        </td>
                    </tr>
                    </table>
            </div>
            &nbsp;<input id="save" value="保存设置" type="button" onclick="save_options();" />
            &nbsp;<input id="reset" type="button" value="恢复到不用插件那样" onclick="resetOptions();" />
            <span id="status" style="color:Red"></span>
            &nbsp; 
            </form>
        </div>
    </div>
    <div class="copyright">
    <a href="http://t.sina.com.cn/airbai">联系作者@airbai</a></div>
    <script type="text/javascript">
        var defaultOptions = "{\"hide\":false, \"bigPic\":false, \"ad\": false, \"sendToSina\": false, \"mute\":false}";
        var defaultHide = "{\"admin\":{\"right\":[]}, \"profile\":{\"right\":[]}}";
        var defaultMute = "[]";
        $(function()
        {
            restore_options();
            $('#txtTags').val(JSON.parse(getLocalStorageVal('mute', '[]')).join(','));
            $('#txtTags').tagsInput({
//               'autocomplete_url': url_to_autocomplete_api,
//               'autocomplete': { option: value, option: value},
               'height':'100px',
               'width':'300px',
               'unique':true,
               'defaultText':'加个tag'
            });
        });
        
        function restore_options() {
            var options = JSON.parse(getLocalStorageVal('options', defaultOptions));
            
            document.getElementById("hide").checked = options.hide === true;
	        document.getElementById("bigPic").checked = options.bigPic === true;
	        document.getElementById("sendToSina").checked = options.sendToSina === true;
	        document.getElementById("ad").checked = options.ad === true;
	        document.getElementById("mute").checked = options.mute === true;
        }
        
        function save_options() {
            var opt = {
                'hide':document.getElementById('hide').checked,
                'bigPic':document.getElementById("bigPic").checked,
                'sendToSina':document.getElementById("sendToSina").checked,
                'ad':document.getElementById("ad").checked,
                'mute':document.getElementById("mute").checked
            };

            localStorage['options'] = JSON.stringify(opt);
            
            localStorage['mute'] = JSON.stringify($('#txtTags').val().trim().split(','));
            
            showSaved();
        }
        
        function resetOptions(){
            document.getElementById('hide').checked = false;
	        document.getElementById("bigPic").checked = false;
	        document.getElementById("sendToSina").checked = false;
	        document.getElementById("ad").checked = false;
	        document.getElementById("mute").checked = false;
            localStorage['options'] = JSON.stringify(JSON.parse( defaultOptions));
            localStorage['hide'] = JSON.stringify(JSON.parse(defaultHide));
            localStorage['mute'] = JSON.stringify(JSON.parse(defaultMute));
            showSaved();
        }
        
        function show()
        {
            localStorage['hide'] = JSON.stringify(JSON.parse(defaultHide));
        }
        
        function showSaved() {
            document.getElementById("status").innerHTML = "啊啊，成功";
            setTimeout(function () {
                document.getElementById("status").innerHTML = "";
            }, 750);
        }

    function getLocalStorageVal(key, defaultVal) {
        var val = localStorage[key];
        if (val == undefined || val == null) {
            localStorage[key] = defaultVal;
            return defaultVal;
        } else {
            return localStorage[key]
        }
    }
    </script>
</body>
</html>
